<style lang="css" src="./update-invester-buy-type.css"></style>

<template lang="html">
<div class="update-buy-type">
  <button class="btn btn-sm btn-primary" @click="showUpdateDialog" v-show="isShowBtn">设置付费套餐</button>
  <modal
    title="设置付费套餐"
    ok-text="提交"
    cancel-text="取消"
    :show.sync="showUpdateBuyTypeModal"
    effect="fade"
    :small="true"
    :width="500">
    <div slot="modal-body" class="modal-body">
      <h4 class="text-left">组合：{{detail.name}}</h4>
      <div class="form-group text-left form-group-sm" v-for="item in investerBuytypeList">
        <table class="table table-bordered table-condensed">
          <caption>
            <div class="form-inline">
              *档位名称：<input type="text" v-model="item.title" class="form-control" disabled>
              <button class="btn btn-sm btn-danger" @click="deleteBuyType(item)">删除此档位</button>
              <button
                v-if="$index !== 0"
                class="btn btn-sm btn-success" @click="moveUp($index)">上移</button>
              <button
                v-if="$index !== investerBuytypeList.length - 1"
                class="btn btn-sm btn-success" @click="moveDown($index)">下移</button>
            </div>
          </caption>
          <thead>
            <tr>
              <th class="col-xs-4">天数</th>
              <th class="col-xs-4">原始价</th>
              <th class="col-xs-4">折后价</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td class="col-sm-4"><input type="number" class="form-control" v-model="item.days" disabled></td>
              <td class="col-sm-4"><input type="number" class="form-control" v-model="item.price" disabled></td>
              <td class="col-sm-4"><input type="number" class="form-control" v-model="item.actualPrice" disabled></td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="form-group form-group-sm">
        <div class="text-right">
          <button type="button" class="btn btn-sm btn-primary" @click="showAddDialog">新增套餐</button>
        </div>
      </div>
    </div>
    <div slot="modal-footer" class="modal-footer">
			<button type="button" class="btn btn-primary" @click="closeBuyTypeModal">关闭</button>
		</div>
  </modal>

  <modal
    :title="'增加投顾组合'"
    ok-text="提交"
    cancel-text="取消"
    effect="fade"
    :small="true"
    :width="640"
    :show.sync="showAddBuyTypeModal"
    :callback="evtAddBuytype">
    <div slot="modal-body" class="modal-body">
      <table class="table table-bordered table-hover">
        <caption>港股套餐列表</caption>
        <thead>
          <tr>
            <th class="col-xs-1">id</th>
            <th class="col-xs-2">套餐名称</th>
            <th class="col-xs-1">天数</th>
            <th class="col-xs-2">原始价格</th>
            <th class="col-xs-2">折后价格</th>
            <th class="col-xs-2">货币类型</th>
            <th class="col-xs-2"></th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="buytype in noSelectedBuytypeList">
            <td class="col-sm-1">{{buytype.id}}</td>
            <td class="col-sm-2">{{buytype.title}}</td>
            <td class="col-sm-1">{{buytype.days}}</td>
            <td class="col-sm-2">{{buytype.price}}</td>
            <td class="col-sm-2">{{buytype.actualPrice}}</td>
            <td class="col-sm-2">{{buytype.amountType | getAmountType}}</td>
            <td class="col-sm-2">
              <button class="btn btn-sm"
                :class="{'btn-primary': !buytype.isSelected, 'btn-danger': buytype.isSelected}"
                @click="selectBuyType(buytype)">{{buytype.isSelected ? '已选中' : '未选中'}}</button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </modal>
</div>
</template>

<script src="./update-invester-buy-type.js"></script>
